Adding a "Read Time" estimator is a great touch. It gives readers a quick heads-up on how much time they need to commit to your article.
To do this, we'll create a small JavaScript Filter in your 11ty configuration that calculates the time based on an average reading speed (usually 200 words per minute).

1. Add the Filter to .eleventy.js

Open your .eleventy.js file and add this logic inside the module.exports function:

JavaScript

module.exports = function(eleventyConfig) {

// Read Time Filter
eleventyConfig.addFilter("readTime", (content) => {
const wordsPerMinute = 200;
// Strip HTML tags to get a clean word count
const text = content.replace(/<[^>]*>/g, "");
const wordCount = text.split(/s+/).length;
const readingTime = Math.ceil(wordCount / wordsPerMinute);
return ${readingTime} min read;
});

// ... (keep your existing date filters and return statement)
};

---

2. Update your Layout to Show the Read Time

Now, you can display this on your blog posts. Open _includes/layout.njk and place the filter near your title or date.

HTML

---

3. (Optional) Show it in the Sidebar too!

If you want readers to see the read time before they click a post, you can update your sidebar loop in the same layout file:

HTML

Note: In the loop, we use post.templateContent instead of just content.

Why this works

1. Word Count: 11ty takes the raw content of your Markdown file.
2. The Math: It divides the total words by 200.
3. Rounding: Math.ceil ensures that even a short 50-word post shows as "1 min read" rather than "0 min read."

4. Push to Live

Save, commit, and push!

Bash

git add .
git commit -m "Add read time estimation"
git push origin main

Your blog is looking very professional now. Would you like to add a "Table of Contents" to your posts, or perhaps a way to show "Related Posts" at the bottom?